<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>组件定义与使用</title>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.js"></script>-->
    <script type="text/javascript" src="../../js/vue.global.js"></script>

</head>
<body>
<!--vue 应用实例挂载到此ID上，这样它及其下面的标签才能使用 vue 语法获取数据-->
<div id="rootApp" style="margin: 50px">
    <p>
        组件使用场景:在项目需要重用某个模块( 头部、尾部、新闻。。。。)的时候，可以将模块抽取成组件，其它页面中注册组件并引用。<br/>
        全局注册:在任何vue实例中都可以引用，如:一般网站的头部导航菜单<br/>
        局部注册:可以在有需要的页面引入组件，如:商城网站首页页面中各种活动模块<br/>
    </p>
    <!-- 使用组件-->
    <counter1></counter1>&nbsp;&nbsp;
    <counter1></counter1>&nbsp;&nbsp;
    <counter2></counter2>&nbsp;&nbsp;
    <counter2></counter2>&nbsp;&nbsp;
</div>
</body>

<script type="text/javascript">
    // 定义组件
    const counter = {
        template: "<button @click='num++'>点击了{{num}}次</button>",
        data() {
            return {num: 0}
        }
    };

    // 1、每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始, 用来在应用中注册"全局"组件
    // 2、传递给 createApp 的选项用于配置根组件
    // 3、应用实例暴露的大多数方法都会返回该同一实例，方便链式编程
    const App = Vue.createApp({
        // 局部注册组件
        components: {
            counter2: counter
        }

    });

    // 全局注册组件：在所有 Vue 实例中都可以使用.
    App.component("counter1", counter);

    // 一个应用需要被挂载(mount)到一个 DOM 元素中，当挂载(mount)应用时，该组件被用作渲染的起点
    const rootViewModel = App.mount("#rootApp");

</script>
</html>
